import React, { useState } from 'react';
import RadioButton from './RadioButton'; // 引入 RadioButton 组件
import Post from './Post'; // 引入 Post 组件

const PostResults = ({ query, results }) => {
  const [category, setCategory] = useState('latest'); // 管理当前选择的排序类型

  // 处理排序方式的改变
  const handleCategoryChange = (newCategory) => {
    setCategory(newCategory); // 更新排序方式
  };

  // 根据选择的排序方式处理帖子
    const sortedResults = () => {
      if (!results || results.length === 0) return [];
      switch (category) {
        case 'latest':
          // 按照日期排序，假设每个帖子有一个 `date` 字段
          return results.sort((a, b) => new Date(b.time) - new Date(a.time));
        case 'hotest':
          // 按照热度排序，假设每个帖子有一个 `popularity` 字段
          return results.sort((a, b) => b.likeCount - a.likeCount);
        default:
          return results;
      }
    };

  const renderPosts = () => {
    const sortedPosts = sortedResults();
    if (sortedPosts.length === 0) {
      return <p>没有找到相关帖子</p>;
    }
    return (
      <ul>
        {sortedPosts.map((post) => (
          <div key={post.blogId} >
            <Post post={post} />
          </div>
        ))}
      </ul>
    );
  };

  return (
      <div>
         {/* 渲染 RadioButton 组件，用于选择最新或最热 */}
        <div style={{ marginLeft: '45px',marginTop: '20px'}}>
          <RadioButton category={category} onCategoryChange={handleCategoryChange} />
        </div>
        <div style={{ marginTop: '30px' }}>
        {renderPosts()}
        </div>
      </div>
  );
};

export default PostResults;
